
<template>
	<div class="userVip-main">
		<mt-navbar v-model="selected">
			<mt-tab-item id="1">VIP本金缴费</mt-tab-item>
			<mt-tab-item id="2">VIP充值缴费</mt-tab-item>
			<mt-tab-item id="3">缴费记录</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				<!-- 提现记录 -->
				<div>
					<div class="alert-title">
						<div class="vip-right">
							<div class="title">1. 接单数不同</div>
							<table>
									<tr>
											<td>平台买家等级</td>
											<td>日</td>
											<td>周</td>
											<td>月</td>
									</tr>
									<tr>
											<td><span class="theme-color">VIP会员</span></td>
											<td><span class="theme-color">5</span></td>
											<td><span class="theme-color">30</span></td>
											<td><span class="theme-color">75</span></td>
									</tr>
									<tr>
											<td>普通会员</td>
											<td>3</td>
											<td>15</td>
											<td>45</td>
									</tr>
							</table>
					</div>
					<div class="vip-right">
						<div class="title">2. 绑定帐号数不同</div>
						<div class="text">VIP会员：每个平台可以绑定<span class="theme-color">最多2个平台账号</span>进行任务操作</div>
						<div class="text">普通会员：每个平台只可以绑定1个平台账号进行任务操作</div>
					</div>
					<div class="vip-right">
						<div class="title">3. 提现免手续费数不同</div>
						<div class="text">VIP会员：<span class="theme-color">每月前四次本金提现免手续费</span></div>
						<div class="text">普通会员：每月前两次本金提现免手续费</div>
					</div>
					</div>
					<mt-field label="本金余额" disabled v-model="form.balance"></mt-field>
					<mt-cell title="VIP类型类型">
						<mt-picker :slots="slots" v-model="form.vipType" @change="onValuesChange"></mt-picker>
					</mt-cell>
					<mt-button type="danger" size="large" @click.native="doCharge">充值</mt-button>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
				<!-- 提现记录 -->
				<div>
					<div class="alert-title">
						<div class="title">VIP权益</div>
            <div class="text">1. 每月接单数增加至75单</div>
            <div class="text">2. 每个平台可以绑定最多2个平台账号</div>
            <div class="text">3. 每月享前四次本金提现免手续费</div>
					</div>
					<mt-field label="官方开户行" disabled v-model="form2.bank"></mt-field>
					<mt-field label="官方账号" disabled v-model="form2.toAccount"></mt-field>
					<mt-cell title="VIP类型类型">
						<mt-picker :slots="slots" v-model="form.vipType" @change="onVipTypeChange"></mt-picker>
					</mt-cell>
					<mt-cell title="转账银行名称">
						<mt-picker :slots="bankSlots" v-model="form.vipType" @change="onBankChange"></mt-picker>
					</mt-cell>
					<mt-field label="打款人姓名" v-model="form2.transferPerson"></mt-field>
					<mt-field label="汇款账户" v-model="form2.fromAccount"></mt-field>
					<!-- <mt-field label="汇款图片" v-model="form2.picture"></mt-field> -->
					<mt-cell title="汇款图片">
						<div class="step-box-img img-input-box">
							<input type="file" class="img-input" @change="upload(arguments,'picture', 'form2')">
							<img :src="form2.picture?imgUrl(form2.picture):'static/imgs/addtupian.png'" alt="" title=""/>
						</div>
					</mt-cell>
					
					<mt-button type="danger" size="large" @click.native="doBankCharge">充值</mt-button>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="3">
					<div v-for="(item, i) in list" v-if="list.length!==0" class="list-item">
						<div class="list-row">
							<div class="u-time">{{item.createtime  | dateformat}}</div>
							<div class="u-status">{{item.description}}</div>
					</div>

					<div class="list-row">
							<div>{{item.money}}元</div>
       				<div class="font-small">{{item.fromDate}} - {{item.endDate}} </div>
					</div>
					</div>
					<div v-if="list.length===0" class="no-data">
						暂无记录
					</div>
			</mt-tab-container-item>
		</mt-tab-container>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>

<script>
import { userService, baseService } from "#/service";
import {Upload} from 'we-plugins'
import baseMixins from '../../mixins/base'
import { MessageBox } from "mint-ui";
import IndexFooter from "@/components/base/IndexFooter";
import { mapGetters } from "vuex";
export default {
  name: "userVip",
  data() {
    return {
      selected: "1",
      screen: {
        pageIndex: 0,
        pageSize: 222
      },
      list: [],
      form: {},
      form2: {
        bank: "招商银行杭州高新支行（金凤和）",
        toAccount: "6214835903473617"
      },
      slots: [
        {
          flex: 1,
          values: [],
          textAlign: "right"
        }
      ],
      bankSlots: [
        {
          flex: 1,
          values: [
            "工商银行",
            "农业银行",
            "建设银行",
            "中国银行",
            "招商银行",
            "其他银行"
          ],
          textAlign: "right"
        }
      ]
    };
	},
	watch:{
    selected(newVal){
			if (newVal === '3') {
				userService.getVipRecordList({
					success: res => {
						if (res.code === 0) {
							this.list = res.data;
							// this.$forceUpdate();
						}
					}
				})
			}
		},
	},
  computed: {
    ...mapGetters(["user"])
  },
  methods: {
    getBalance() {
      userService.balance({
        success: res => {
          if (res.code === 0) {
            const { balance } = res.data;
            this.form.balance = balance;
            this.$forceUpdate();
          }
        }
      });
    },
    getMembershipFeeType() {
      baseService.membershipFeeType({
        success: res => {
          if (res.code === 0) {
            this.vipAllList = res.data;
            this.slots[0].values = res.data.map(
              v => `${v.money}元 | ${v.name}`
            );
            // this.$forceUpdate();
          }
        }
      });
    },
    doCharge() {
      MessageBox.confirm("确定充值？").then(action => {
        const { id: membershipFeeId } =
          this.vipAllList.filter(
            v => `${v.money}元 | ${v.name}` === this.selectVipType
          )[0] || {};
        userService.payMembershipfee({
          params: {
            membershipFeeId
          },
          success: res => {
            if (res.code === 0) {
              this.$toast({
                message: "充值成功",
                position: "middle",
                duration: 2000
              });
              this.getBalance();
            }
          }
        });
      });
    },
    doBankCharge() {
      const { id: membershipFeeId, money: transferMoney } =
        this.vipAllList.filter(
          v => `${v.money}元 | ${v.name}` === this.selectVipType1
        )[0] || {};
      const { toAccount, bankName, transferPerson, fromAccount, picture } = this.form2;
      const data = {
        transferType: 1,
        remark: "",
        membershipFeeId,
				transferMoney,
				transferPerson,
        toAccount,
        bankName,
        picture
      };
			baseService.membershipTransfer({
          data: {
            membershipFeeId
          },
          success: res => {
            if (res.code === 0) {
              this.$toast({
                message: "充值成功",
                position: "middle",
                duration: 2000
              });
              this.getBalance();
            }
          }
        });
    },
    onValuesChange(picker, values) {
      this.selectVipType = values[0];
    },
    onVipTypeChange(picker, values) {
      this.selectVipType1 = values[0];
    },
    onBankChange(picker, values) {
      this.form2.bankName = values[0];
    }
  },
  created() {
    this.getBalance();
    this.getMembershipFeeType();
  },
  components: {
    IndexFooter
  },
	mixins: [baseMixins]
};
</script>

<style lang="less" scoped>
.userVip-main {
  padding-bottom: 0.6rem;
  .alert-title {
		font-size: 0.12rem;
		padding: 0.2rem;
		.theme-color {
			color: #E43A45;
		}
		.vip-right {
			td {
				text-align: center;
				width: 25%;
				color: #333;
				padding: 0.02rem;
			}
		}
		.title {
			color: #E43A45;
			margin-top: 0.14rem;
			margin-bottom: 0.14rem;
		}
		.text {
			margin-top: 0.06rem;
		}
	}
	.no-data {
		font-size: 0.14rem;
    text-align: center;
    padding-top: 0.2rem;
	}
	.list-item {
		border-bottom: 1px dashed #ccc;
    margin: 0.1rem;
		.list-row {
			font-size: 0.14rem;
			padding: 0.04rem;
			display: flex;
			div {
				flex: 1;
			}
			.u-time {
				color: #E43A45;
			}
			.u-status {
				text-align: right;
				color: #E43A45;
				font-weight: bold;
			}
			.font-small {
				text-align: right;
			}
		}
	}

	.img-input-box {
    position: relative;
	}
	
	.img-input {
    width: 0.64rem;
    height: 0.64rem;
    opacity: 0;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0
	}
	
	.step-box-img {
    width: 0.64rem;
    height: 0.64rem;
    float: left;

    margin-right: 0.3rem;
  }

  .step-box-img img {
    width: 100%;
    max-height: 0.64rem;
    display: block;
  }
}
</style>
